<template>
    <view class="content">
        <!-- 在页面顶部添加计时显示 -->
        <view class="timer-box" v-if="showTimer && fromEarnPoints">
            <template v-if="!showCompleted">
                浏览时长：{{ elapsedTime }}/{{ maxDuration }}秒
                <view class="progress-bar">
                    <view class="progress" :style="{ width: (elapsedTime / maxDuration) * 100 + '%' }"></view>
                </view>
            </template>
            <template v-else>
                <view class="completed-inline">
                    <text v-if="showCompletionText">任务已完成！</text>
                    <button class="return-button" @click="navigateToEarnPoints">返回赚积分</button>
                </view>
            </template>
        </view>
        
        <view class="timer-box-hasIcon" v-if="showTimer && fromEarnPoints && showCompletionText">
            <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/pointsIcon.png" alt="" style="width: 126rpx;height: 144rpx;">
            <template>
                <!-- 浏览时长：{{ elapsedTime }}/{{ maxDuration }}秒 -->
                <view class="progress-bar-hasIcon">
                    <view class="progress" :style="{ width: (elapsedTime / maxDuration) * 100 + '%' }"></view>
                </view>
            </template>
        </view>
        <!-- 完成提示 -->
        <!-- <view class="completed-mask" v-if="showCompleted && fromEarnPoints">
            <view class="completed-box">
                <view class="completed-icon">✅</view>
                <view class="completed-text">任务已完成！</view>
                <button class="return-button" @click="navigateToEarnPoints">返回赚积分</button>
            </view>
        </view> -->
        <view class="main">
            <scroll-view scroll-y="true" @scroll="handleScroll" style="height: 100vh; overflow: hidden;"
                :scroll-top="scrollTop" scroll-anchoring="true" show-scrollbar="false">
                <!-- 这里是页面其他内容 -->
                <view class="content-top fixed_top" :style="bgOpacity" :class="{ fixed_top: scrolling }">
                    <view class="top_title" :style="titleTop">
                        <view :class="{tab_color:scrolling}">17 Life</view>
                        <view class="topCartIcon" :style="cartRight" @click="toMyCart"><van-icon name="cart-o" size="19" class="cartIcon" /> </view>
                    </view>
                    <view class="tabs white">
                        <view class="tabbar-item tab-item " style="width: 85%;">
                            <scroll-view class="top-tabs-view" scroll-x="true"
                                :class="(swiperTabsCurrent + 1) === tabBarList.length ? 'last-top-tabs-view' : ''"
                                show-scrollbar="false" :scroll-into-view="tabsCurrent" :scroll-with-animation="true">
                                <view class="tabs-topic-view tabbar-item tab-item " v-for="(item, index) in tabBarList"
                                    :id="'tabNum' + (index + 1)" :key="index"
                                    @click="changeTab(index, $event, item.cateName,item.id)" :style="tabsColor"
                                    :class="{ active: index === swiperTabsCurrent, option: swiperTabsCurrent === 0, }">
                                    {{ item.cateName }}
                                </view>
                            </scroll-view>
                        </view>
                        <view class="tabbar-item tab-item-sort" @tap="toMall" :style="tabsColor" style="width: 15%;">
                            <img class="r2" :src="scrolling ? actTabIcon : inActTabIcon" alt=""
                                style="width:8px ;height: 7px; " />
                            分类
                        </view>
                        <!-- <view
                            class="tabbar-item tab-item"
                            v-for="(ele, index) in tabBarList"
                            @click="changeTab(index, $event, ele.typeName)"
                            :class="{ active: index === currentIndex, option: currentIndex === 0, }"
                            :key="index"
                            :style="tabsColor">
                            {{ ele.cateName }}
                        </view>
                        <view class="tabbar-item tab-item-sort" @click="toMall" :style="tabsColor">
                            <img class="r2" :src="scrolling ? actTabIcon : inActTabIcon" alt=""
                                style="width:8px ;height: 7px; ">
                            分类
                        </view> -->
                    </view>
                </view>
                <!-- <scroll-view :refresher-enabled="false" class="scroll-content" scroll-y :lower-threshold="80"> -->

                <!-- 滚动部分 -->
                <view class="scrollMain_box">
                    <!-- 背景图轮播哦 -->
                    <view class="sur_box_bg">
                        <swiper class="top_swiper" autoplay="false" :indicator-dots="true"
                            indicator-active-color="#FFFFFF" :indicator-width="20" ref="webpage">
                            <swiper-item v-for="(swiper_item, index) in topSwiperList" :id="index" :key="index" @click="toGoodsDetail(swiper_item.linkedPageUrl)">
                                <img :src="swiper_item.bannerImage" alt="">
                            </swiper-item>
                        </swiper>
                    </view>
                    <!-- 图标 -->
                    <view :style="scrollMT">
                        <view class="app_icon" v-if="currentIndex === 0">
                            <view class="app_icon_box" @click="onProductList(0)">
                                <view class="app_icon_img"> <img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/surprise/app_icon1.png"
                                        alt="" style="width: 22px; height: 22px;"></view>
                                <view class="app_icon_text">新品首发</view>
                            </view>
                            <view class="app_icon_box" @click="onProductList(1)">
                                <view class="app_icon_img"><img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/surprise/app_icon2.png"
                                        alt="" style="width: 22px; height: 22px;"></view>
                                <view class="app_icon_text">惊喜榜单</view>
                            </view>
                            <view class="app_icon_box" @click="onProductList(2)">
                                <view class="app_icon_img"><img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/surprise/app_icon3.png"
                                        alt="" style="width: 22px; height: 22px;"></view>
                                <view class="app_icon_text">好评如潮</view>
                            </view>
                            <view class="app_icon_box" @click="onProductList(3)">
                                <view class="app_icon_img"><img
                                        src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/surprise/app_icon4.png"
                                        alt="" style="width: 22px; height: 22px;"></view>
                                <view class="app_icon_text">热门补货</view>
                            </view>
                        </view>
                        <!-- 中间部分的banner图 -->
                        <view class="middle" v-if="currentIndex === 0">
                            <view class="middle_left middle_position">
                                <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/surprise/banner01.png"
                                    alt="">
                                <view class="middle_text left_text_position">日常洗护必备</view>
                            </view>
                            <view class="middle_right" style="margin-left: 14px;">
                                <view class="middle_right_content b12 middle_position">
                                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/surprise/banner02.png"
                                        alt="">
                                    <view class="middle_text right_text_position">临期专区</view>
                                </view>

                                <view class="middle_right_content middle_position">
                                    <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/surprise/banner03.png"
                                        alt="">
                                    <view class="middle_text right_text_position">新人必备美食</view>
                                </view>
                            </view>
                        </view>
                        <!-- 热卖推荐 -->
                        <!--<view class="hotSale" :class="{ 't324': currentIndex !== 0 }">
                            <view class="hotSale_title">热卖推荐</view>
                            <view class="hotSale_box">
                                <view class="fixDiv"></view>
                                <scroll-view class="top-menu-view hotSale_content" scroll-x="true" enable-flex show-scrollbar="false"
                                    :class="(swiperCurrent + 1) === hotSaleList.length ? 'last-top-menu-view' : ''"
                                    :scroll-into-view="tabCurrent" :scroll-with-animation="true">
                                    <view class="shangpinList" v-for="(itemS, indexS) in hotSaleList"
                                        :id="'tabNum' + (indexS + 1)" :key="indexS" @click="lookInfo(indexS, $event, itemS)">
                                        <view class="renqi_img"> <img :src="itemS.imgurl" alt=""
                                                style="width: 121px; height: 121px;"> </view>
                                        <view class="renqi_detail">{{ itemS.detail }}</view>
                                        <view class="renqi_title">{{ itemS.title }}</view>
                                        <view class="renqi_price">{{ itemS.price }}</view>
                                    </view>
                                </scroll-view>
                            </view>
                        </view> -->
                        <view class="hotSale" v-if="hotSaleList.length>0">
                            <view class="hotSale_title">热卖推荐</view>
                            <view class="hotSale_box">
                                <!--<view class="fixDiv"></view> -->
                                <scroll-view class="top-menu-view hotSale_content" scroll-x="true"
                                    show-scrollbar="false"
                                    :class="(swiperCurrent + 1) === hotSaleList.length ? 'last-top-menu-view' : ''"
                                    :scroll-into-view="tabCurrent" :scroll-with-animation="true">
                                    <view class="shangpinList" v-for="(itemH, indexH) in hotSaleList"
                                        :id="'tabNum' + (indexH + 1)" :key="indexH" @click="toGoodsDetail(itemH.id)">
                                        <view class="renqi_img"> <img :src="itemH.image" alt=""
                                                style="width: 121px; height: 121px;"> </view>
                                        <view class="renqi_detail">{{ itemH.storeSubtitle }}</view>
                                        <view class="renqi_title">{{ itemH.storeName }}</view>
                                        <view class="renqi_price">￥{{ itemH.price }}</view>
                                    </view>
                                </scroll-view>
                            </view>
                        </view>

                        <!-- 为您推荐 -->
                        <view class="forYou" v-if="forYouList.length>0">
                            <view class="hotSale_title">为您推荐</view>
                            <view class="forYou_content">
                                <view class="forYouList" v-for="(itemL, indexL) in forYouList" :id="indexL"
                                    :key="indexL" @click="toGoodsDetail(itemL.id)">
                                    <view class="forYou_img"> <img :src="itemL.image + '?x-oss-process=image/resize,w_300/quality,q_80'" alt="" mode="widthFix"> </view>
                                    <view class="forYou_detail pl8 pr8">{{ itemL.storeSubtitle }}</view>
                                    <view class="forYou_title pl8 pr8">{{ itemL.storeName }}</view>
                                    <view class="forYou_price pl8 pr8">￥{{ itemL.price }}</view>
                                </view>
                            </view>
                        </view>

                        <!-- logo -->
                        <view class="logo_img t20">
                            <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/logo_img.png"
                                mode="widthFix" />
                        </view>
                    </view>

                </view>
            </scroll-view>
            <!-- </scroll-view> -->
        </view>
        <!-- <view class="nav_box"> -->
        <tabBar :activeNav="activeNav"></tabBar>
        <!-- </view> -->
    </view>
</template>

<script>

import { topStyleWhite } from '@/utils/topColor'
import { tabBar } from '@/mycomponents/tabBar'
import { getSurpriseApi } from '@/api/surprise'

import { queryInfoByIdApi, queryListByPidApi,categorySurpriseApi } from '@/api/mall'
import {completeTaskApi} from '@/api/checkedInTask'
import { authMixin } from '@/utils/isLogin'

export default {
    components: {
        tabBar
    },
    data () {
        return {
            title: 'Hello111',
            scrolling: false, // 顶部区域吸顶效果
            bgOpacity: '',
            scrollMT: '',
            scrollTop: 0,
            old: {
                scrollTop: 0
            },
            value1: 0,
            value2: 'a',
            activeNav: 2, // 底部tab
            // 页面顶部 tabs
            tabsColor: '',
            actTabIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/surprise/sort_icon.png',
            inActTabIcon: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/sort_icon_white.png',

            swiperCurrent: 0, // 热卖推荐轮播图
            tabCurrent: 'tabNum1', // 热卖推荐轮播图

            currentIndex: 0, // 页面顶部tabs
            swiperTabsCurrent: 0, // 页面顶部tabs
            tabsCurrent: 'tabsNum1', // 页面顶部tabs
            tabList: [],
            tabBarList: [ { id: 0, cateName: '推荐' } ],
            list: [
                {
                    typeId: 1,
                    cateName: '美食'
                },
                {
                    typeId: 2,
                    cateName: '家居'
                },
                {
                    typeId: 3,
                    cateName: '日化'
                },
                {
                    typeId: 4,
                    cateName: '户外'
                },
                {
                    typeId: 5,
                    cateName: '临期'
                },
                {
                    typeId: 6,
                    typeName: '分类'
                }
            ],
            topSwiperList: [ // 页面顶部 轮播图
                { bannerImage: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/surprise/banner_bg.png' },
                { bannerImage: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/surprise/banner_bg.png' },
                { bannerImage: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/surprise/banner_bg.png' }
            ],

            hotSaleList: [],  // 热卖商品
            forYouList: [], // 为您推荐商品列表
            menuButtonTop: '',
            menuButtonWidth: '',
            cartRight: '',
            titleTop: '',
            bannerType: 2,
            productCateId: 0,
            isHot: false,
            isNew: false,
            id: undefined,
            cateId: 0,
            // 新增计时相关数据
            elapsedTime: 0,
            maxDuration: 15,
            showTimer: false, 
            showCompleted: false, //完成状态
            fromEarnPoints: false, // 新增来源标记
            showCompletionText:true,  //赚积分任务已完成 提示文字   是否展示
            timerInBackground: false, // 定时器是否在后台运行
            params:{}, // 接口参数
            productId:undefined, // 商品id
        }
    },
    watch: {
        showCompleted(newVal) {
            if (newVal) {
                // 监听任务完成状态，10秒后自动隐藏文字
                this.textTimer = setTimeout(() => {
                    this.showCompletionText = false;
                    // 当返回按钮隐藏时调用接口
                    if (!this.showCompletionText && getApp().globalData.currentTask.id) {
                        completeTaskApi({
                            taskManagementId: getApp().globalData.currentTask.id
                        }).then(res => {
                            if (res.code == 200) {
                                uni.showToast({
                                    title: `任务完成，获得${getApp().globalData.currentTask.rewardPoints}积分`,
                                    icon: 'success'
                                });
                            }
                        });
                    }
                }, 10000);
                this.showTimerBox = setTimeout(() => {
                    this.showTimer = false
                }, 15000);
            }
        }
    },
    onReady () {
        topStyleWhite()
        this.scrollTop = this.old.scrollTop
        this.$nextTick(function () {
            this.scrollTop = 0
        })
        this.bgOpacity = `background: rgba(255, 255, 255, 0)`
        this.getSurprisePageInfo()
    },

    // // 添加页面生命周期
    // onShow() {
    //     uni.$emit('mallPageShow');
    //     this.$nextTick(() => {
    //         uni.hideTabBarRedDot({ index: 1 }); // 确保tabbar不会遮挡
    //     });
    // },
    // onHide() {
    //     uni.$emit('mallPageHide');
    // },
    // 修改已有的生命周期
    onShow() {
        // topStyleWhite()
        // this.scrollTop = this.old.scrollTop
        // this.$nextTick(function () {
        //     this.scrollTop = 0
        // })
        // this.bgOpacity = `background: rgba(255, 255, 255, 0)`
        // this.getSurprisePageInfo()
        const pages = getCurrentPages();
        this.fromEarnPoints = getApp().globalData.fromEarnPoints || false;
        // getApp().globalData.fromEarnPoints = false; // 重置标记

        console.log(pages,'是否来自赚积分页面：', this.fromEarnPoints,getApp().globalData.currentTask,getApp().globalData.taskType =='surprise');

        if (this.fromEarnPoints &&  getApp().globalData.taskType =='surprise' &&
                getApp().globalData.currentTask && 
                getApp().globalData.currentTask.taskName.includes('惊喜商城') && 
                getApp().globalData.currentTask.taskName.includes('逛逛')) {
            uni.$emit('mallPageShow');
            this.showTimer = true;
            this.showCompleted = false;
            this.elapsedTime = 0; //浏览时间
            this.maxDuration = getApp().globalData.currentTask.taskDuration; //任务时长
            this.timer = setInterval(() => {
                if (this.elapsedTime < this.maxDuration) {
                    this.elapsedTime++;
                } else {
                    clearInterval(this.timer);
                    this.showCompleted = true; // 触发完成状态
                }
            }, 1000);
        }

    },
    onHide() {
        // 页面隐藏时处理计时器
        const pages = getCurrentPages();
        const currentRoute = pages[pages.length - 1]?.route
        const isSwitchToTab = pages.length === 1; // 切换到tab页
        console.log(pages,isSwitchToTab,'是否切换到tab页',currentRoute)
        // 只有当跳转到非商品详情页时才停止计时
        if (isSwitchToTab && this.fromEarnPoints && getApp().globalData.taskType == 'surprise') {
            if (this.fromEarnPoints && !this.showCompleted) {
                clearInterval(this.timer)
                this.timer = null
                this.showTimer = false
                getApp().globalData.fromEarnPoints = false
                getApp().globalData.taskType = ''

                uni.showToast({
                    title: '已退出浏览任务',
                    icon: 'none'
                })
            }
            // clearInterval(this.timer);
            // clearTimeout(this.textTimer);
            // clearTimeout(this.showTimerBox)
        }

        uni.$emit('mallPageHide')

        // 如果任务已完成，重置标记
        if (this.showCompleted) {
            getApp().globalData.fromEarnPoints = false
        }
        // if (isSwitchToTab && this.fromEarnPoints && getApp().globalData.taskType == 'surprise') {
        //     // 切换到tab页时直接停止计时并重置状态
        //     clearInterval(this.timer);
        //     this.timer = null;
        //     this.showTimer = false;
        //     getApp().globalData.fromEarnPoints = false;
        //     getApp().globalData.taskType = ''

        //     uni.showToast({
        //         title: '已退出浏览任务',
        //         icon: 'none'
        //     });
        // }
        // uni.$emit('mallPageHide');
        // // 页面隐藏时 清除计时器
        // clearInterval(this.timer);
        // clearTimeout(this.textTimer);
        // clearTimeout(this.showTimerBox)
        // this.timer = null;
        // this.showTimer = false;
        // // 如果是从赚积分页面跳转过来的，且未完成任务，需要处理返回逻辑
        // if (this.fromEarnPoints && !this.showCompleted) {
        //     // 这里可以添加返回时的处理逻辑，比如提示用户未完成任务
        //     uni.showToast({
        //         title: '未完成浏览任务',
        //         icon: 'none'
        //     });
        // }
    },

    onLoad (data) {
        topStyleWhite()

        const menuButtonInfo = wx.getMenuButtonBoundingClientRect()
        console.log('胶囊按钮高度：', menuButtonInfo.height)
        console.log('胶囊按钮top：', menuButtonInfo.top, menuButtonInfo)
        console.log('胶囊按钮宽度：', menuButtonInfo.width)
        this.menuButtonWidth = menuButtonInfo.width
        this.cartRight = 'margin-right:' + (this.menuButtonWidth + 15) + 'px'
        console.log(this.searchRight)

        this.menuButtonTop = menuButtonInfo.top
        // this.titleTop = 'margin-top:' + (this.menuButtonTop + menuButtonInfo.height / 3) + 'px'
        this.titleTop = 'margin-top:' + (this.menuButtonTop + (menuButtonInfo.height - 25) / 2) + 'px'
        console.log(this.titleTop)

        if (data && data.productId) {
            // this.params = JSON.parse(decodeURIComponent(data.params))
            // console.log(JSON.parse(decodeURIComponent(data.params)))
            console.log('data', data.productId)
            this.productId=data.productId
            if(this.productId){
                uni.navigateTo({
                    url: '/pages/shangcheng/goodsDetail?params='+encodeURIComponent(JSON.stringify({
                        productId:this.productId
                    }))
                })
            }
        }
    },
    onUnload() {
        if (getApp().globalData.fromEarnPoints) {
            uni.$emit('navigateBack');
        }
    },
    mounted () {
        this.currentIndex = 0
        this.swiperCurrent = 0
        topStyleWhite()
        this._categorySurpriseApi()
        console.log('当前uni-app项目版本：', getApp().globalData)
        // 条件编辑只在微信小程序显示
        // #ifdef MP-WEIXIN
        const accountInfo = wx.getAccountInfoSync()
        this.version_number = accountInfo.miniProgram.version // 小程序 版本号
        console.log(accountInfo.miniProgram.version, '小程序版本号')
        // #endif
    },
    methods: {

        login () {
            uni.navigateTo({
                url: '/pages/home/index'
            })
        },
        handleScroll (e) {
            topStyleWhite()
            // // console.log('顶部滚动距离', e.detail.scrollTop)
            // this.old.scrollTop = e.detail.scrollTop
            // if (e.detail.scrollTop > 5 && !this.scrolling) {
            //     this.scrolling = true
            //     this.tabsColor = 'color:#111111'
            // } else if (e.detail.scrollTop <= 5 && this.scrolling) {
            //     this.scrolling = false
            //     this.tabsColor = ''
            // }
            // this.bgOpacity = `background: rgba(255, 255, 255, ${e.detail.scrollTop / 200})`
            const scrollTop = e.detail.scrollTop
            this.old.scrollTop = scrollTop
            // 使用更精确的阈值判断，避免临界值抖动
            const shouldScroll = scrollTop > 10 // 适当增大阈值
            if (shouldScroll && !this.scrolling) {
                this.scrolling = true
                this.tabsColor = 'color:#111111'
            } else if (scrollTop <= 5 && this.scrolling) { // 使用不同的阈值避免临界值抖动
                this.scrolling = false
                this.tabsColor = ''
            }
            // 平滑过渡背景透明度
            const opacity = Math.min(scrollTop / 100, 1) // 调整分母使过渡更平滑
            this.bgOpacity = `background: rgba(255, 255, 255, ${opacity})`
        },

        clearStorage () {
            uni.showToast({
                title: '清除成功',
                icon: 'success',
                duration: 2000, // 提示的延迟时间，单位毫秒，默认：1500
                mask: false // 是否显示透明蒙层，防止触摸穿透，默认：false
                // image:'./image.png',//自定义图标的本地路径
            })
        },
        // 去我的购物车
        toMyCart () {
            authMixin()
            const params = {}
            uni.navigateTo({
                url:
              '/pages/shoppingCart/gouwuche?params=' +
              encodeURIComponent(JSON.stringify(params))
            })
        },
        changeTab (index, e, cateName, id) {
            this.swiperTabsCurrent = index
            this.currentIndex = index
            console.log(e.detail.title, cateName, id, '090909')
            this.id = id
            this.queryInfoByIdMethod()
            this.cateId = id
            this.getSurprisePageInfo()
        },
        // 组件
        onChangeNav () {
            console.log('11111')
        },
        onTabClick (val, e) {
            this.activeIndex = val
            console.log(val, '发现页服务')
        },

        // 热卖轮播
        lookInfo (index, e, item) {
            this.swiperCurrent = index
            this.tabCurrent = 'tabNum' + index
            console.log(index, item, '组件', this.tabCurrent, 'tabCurrent++', this.swiperCurrent)
            // this.$emit('gradeSelect', index, item)
        },
        scrollPage (e) {
            this.bgOpacity = `opacity:${1 - e.detail.scrollTop / this.navHeight}`
        },
        scrolltolower () {
            // if (this.totalPage <= this.listData.length) {
            //     this.isLoadAll = true
            //     this.loadingText = '没有更多数据啦~'
            // } else {
            //     // this.studentInfoTiWenParams.pageNum++
            //     this.pageNum++
            //     this.isLoadAll = true
            //     this.loadingText = '加载中...'
            //     this.getStudentDetailsMethod(true)
            // }
        },

        onProductList (index) {
            let navBarTitle = ''
            const sortField = ''
            switch (index) {
            case 0:
                navBarTitle = '新品首发'
                break
            case 1:
                navBarTitle = '惊喜榜单'
                break
            case 2:
                navBarTitle = '好评如潮'
                break
            case 3:
                navBarTitle = '热门补货'
                break
            }
            console.log('dianji', index, navBarTitle)
            const params = {}
            params.biaoshi = 'index'
            params.title = navBarTitle
            uni.navigateTo({
                url:
              '/pages/shangcheng/productList?params=' +
				encodeURIComponent(JSON.stringify(params))
            })
        },

        // 分类按钮  跳转商城
        toMall () {
            console.log('......分类按钮', this.currentIndex)

            const params = {}
            params.tabBarList = this.tabList
            params.currentIndex = this.currentIndex
            console.log(params, 'params')
            // debugger
            uni.navigateTo({
                url:
              '/pages/shangcheng/mall?params=' +
              encodeURIComponent(JSON.stringify(params))
            })
        },
        toGoodsDetail (id) {
            console.log('......', id)
            const params = {}
            params.biaozhi = 'index'
            params.productId = id
            // 跳转前保存当前计时状态
            getApp().globalData.timerPaused = {
                elapsedTime: this.elapsedTime,
                maxDuration: this.maxDuration,
                showTimer: this.showTimer
            }
            uni.navigateTo({
                url:
              '/pages/shangcheng/goodsDetail?params=' +
              encodeURIComponent(JSON.stringify(params))
            })
        },

        // 接口
        // 页面banner图  跳转
        // getSurpriseBannerApi () {
        //     return new Promise((resolve, reject) => {
        //         const bannerParams = {
        //             bannerType: this.bannerType,
        //             productCateId: this.productCateId
        //         }
        //         getSurpriseBannerApi(bannerParams).then((res) => {
        //             console.log(res)
        //             if (res.code === 200) {
        //                 console.log(res.data, 'res', res.message)
        //                 if (this.cateId !== 0) {
        //                     this.topSwiperList = res.data
        //                 }
        //                 resolve(res)
        //             } else {
        //                 reject(res)
        //             }
        //         })
        //     })
        // },
        // 惊喜页面内容
        getSurprisePageInfo () {
            this.forYouList = []
            this.hotSaleList = []
            return new Promise((resolve, reject) => {
                const params = {
                    cateId: this.cateId
                }
                console.log('当前选择分类Id',this.cateId);
                getSurpriseApi(params).then((res) => {
                    if (res.code === 200) {
                        if (this.cateId === 0) {
                            this.topSwiperList = res.data.mpBannerManagement // 页面顶部banner
                        }
                        this.forYouList = res.data?.ebStoreProduct || [] // 为您推荐
                        console.log(this.forYouList, '为您推荐--');
                        this.hotSaleList = res.data?.ebStoreProduct || [] // 热卖
                        console.log(this.hotSaleList, '热卖推荐---');

                        resolve(res)
                    } else {
                        reject(res)
                    }
                })
            })
        },
        // 获取惊喜页顶部分类
        async _categorySurpriseApi(){
            const res = await categorySurpriseApi()
            if(res.code !==200){
                return
            }
            this.tabBarList = [{
                'id':0,
                'cateName':'推荐',
                'sort':0
            }]
            this.tabBarList = this.tabBarList.concat(res.data)
            console.log(this.tabBarList,'顶部分类列表');
        },

        // 分类查到
        queryInfoByIdMethod () {
            return new Promise((resolve, reject) => {
                const params = {
                    id: this.id,
                    pid: 0,
                    type: 1
                }
                queryInfoByIdApi(params).then((res) => {
                    console.log(res)
                    if (res.code === 200) {
                        console.log(res.data, 'res', res.message)

                        resolve(res)
                    } else {
                        reject(res)
                    }
                })
            })
        },

        // 页面顶部tab
        // queryInfoByPid () {
        //     return new Promise((resolve, reject) => {
        //         const params = {
        //             id: 0,
        //             pid: 0,
        //             type: 1
        //         }
        //         queryListByPidApi(params).then((res) => {
        //             console.log(res)
        //             if (res.code === 200) {
        //                 console.log(res.data, 'res', res.message)
        //                 res.data.forEach((item, index) => {
        //                     this.tabBarList.push( // 商品列表
        //                         Object.assign({}, { cateName: item.cateName, id: item.id })
        //                     )
        //                 })
        //                 this.tabList = res.data
        //                 resolve(res)
        //             } else {
        //                 reject(res)
        //             }
        //         })
        //     })
        // },
        navigateToEarnPoints() {
            if (this.showCompleted && getApp().globalData.currentTask) {
                const task = getApp().globalData.currentTask;
                uni.$emit('mallTaskCompleted', {
                    taskId: task.id,
                    isCompleted: true
                });
            }
            uni.navigateTo({
                url: '/pages/integral/earnPoints',
                success: () => {
                    this.showCompleted = false;
                    this.showTimer = false;
                    this.showCompletionText = true;
                    // 清除计时器和状态
                    clearInterval(this.timer);
                    clearTimeout(this.textTimer);
                    clearTimeout(this.showTimerBox);
                }
            });
            // this.showCompleted = false;
            // this.showTimer = false;
            // this.showCompletionText = true; // 重置文字状态
        },

    }
}
</script>

<style lang="scss" scoped>
::v-deep .van-dropdown-menu {
	background: transparent;
	box-shadow: none;
}

// 最外层
.content {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	// height: 100vh;
	height: calc(100vh - 50px);
	overflow-y: auto;
	z-index: -2;
	background-size: 100%;
	background-color: #ffffff;
	scrollbar-width: none; /* 针对Firefox */
}
.content::-webkit-scrollbar {
  display: none; /* 针对Chrome, Safari和Opera */
}

.main {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100vh;
	// background-color: #F9F9F9;
	// background-color: #ffffff;
	background-color: transparent;
	.fixed_top {
		position: fixed;
		width: 100%;
		z-index: 999;
	}
}
.content-top {

}

// hos life
.top_title{
	position: relative;
	margin-top: 59px;
	padding-left: 24px;
	font-weight: bolder;
	font-size: 38rpx;
	text-align: left;
	color: #ffffff;
	line-height: 38rpx;
	z-index: 3;

    display: flex;
    justify-content: space-between;
    align-items: center;

    .topCartIcon{
        width: 19px;
        height: 19px;
        background-color: rgb(0, 0, 0, 0.4);
        padding: 3px;
        border-radius: 12rpx;
    }
}

.tabs{
	position: relative;
	padding-bottom: 12px;
	margin-top: 18px;
	// 需修改 原来是20px
	// padding-left: 12px;
	// padding-right:12px;
	padding-left: 24px;
	padding-right:24px;
    height: 32rpx;
	line-height: 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .top-tabs-view {
        display: flex;
        // position: fixed;
        white-space: nowrap;
        padding-right: 25rpx;
        width: calc(100% - 25rpx);

        .tabs-topic-view {
            display: inline-block;
            white-space: nowrap;
            margin-right:50rpx;
            position: relative;
            //	border-radius: 14px;
            //font-size: 14px;
            //color: #111111;
            height: 32rpx;

            .tabs-topic-act {
                display: inline-block;
                // padding: 0px 12px;
                // height: 28px;
                // line-height: 28px;
                // border-radius: 14px;
                transition: 0.3s;
                font-weight: bold;
            }

            .tabs-topic {
                // font-weight: 400;
                display: inline-block;
                // padding: 0px 12px;
                // height: 28px;
                // line-height: 28px;
                // background: $fill-2;
                // border-radius: 14px;
            }

            .tabs-topic-act .tabs-topic-bottom-color {
                background: #3d7eff;
            }
        }

        .tabs-topic-view:last-child {
            margin-right: 0px;
        }
    }

    .last-top-tabs-view {
        // width: calc(100% - 64px);
    }

    ::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        color: transparent;
    }

    .un-act-border {
        border: 1px solid #f9f9f9;
    }
}
.tab_color{
	color: #111111;
	&.active {
		color: #111111;
    }
}

.white{

    // 分类二字
	.tab-item-sort{
		text-align: center;
		font-size: 36rpx;
		font-weight:bolder;
		// color: #111111;
		color: #ffffff;
	}
    // 其他文字
	.tab-item{
		font-size: 28rpx;
		font-weight:bolder;
		// color: #666666;
		color: #ffffff;
	}
  .tabbar-item {
    flex: auto;
    z-index: 1;
    // width: 36px;
    // height: 28px;
    // line-height: 28px;
    text-align: center;

    &.active {
        // font-family: 'PingFang SC';
        font-style: normal;
        font-weight: bolder;
		font-size: 36rpx;
		line-height: 36rpx;
		// color: #111111;
		color: #ffffff;
    }
  }
}

.sur_box_bg{
	position: relative;
	top: 0px;
	// z-index: -1;
	height: 461px;
	width: 100%;

	.top_swiper {
		display: block;
		height: 461px;
	}
	img{
		width: 100%;
		height: 461px;
	}
}

.scroll-content {
    flex: 1;
    height: 1px;
}

// 滚动部分   图片+内容
.scrollMain_box{
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	z-index: -1;
	padding-bottom: 50px;
	scrollbar-width: none; /* 针对Firefox */
}

// 四个图标
.app_icon{
	display: flex;
	justify-content: space-between;
	// margin-top: 357px;
	margin-top: 24px;
	margin-left: 12px;
	margin-right: 12px;

	.app_icon_box{
		flex: 1;
		text-align: center;
	}
	.app_icon_img{
		line-height: 22px;
		img{
			width: 22px;
			height: 22px;
		}
	}
	.app_icon_text{
		font-weight: bold;
		font-size: 12px;
		text-align: center;
		color: #111111 ;
		line-height:12px;
	}
}

// 中部banner图片
.middle {
	margin-top: 24px;
	// padding-left: 23px;
	// padding-right: 23px;
	margin-left: 24px;
	margin-right: 24px;
	display: flex;
	height: 204px;
	justify-content: space-between;
	.middle_left{
		width: 48%;
		img{
			width: 100%;
			// width: 156px;
			height: 204px;
		}
	}
	.middle_right{
		width: 48%;
	}
	.middle_right_content {
		height: 96px;
		line-height: 96px;
		img{
			width: 100%;
			// width: 160px;
			height: 96px;
		}
	}

	// 图片+文字位置
	.middle_position {
		position: relative;
	}

	.middle_text {
		position: absolute;
		line-height: 16px;
		font-weight: bolder;
		font-size: 16px;
		text-align: left;
		color: #FFFFFF;
	}

	.right_text_position {
		top: 40%;
		left: 5%;
	}

	.left_text_position {
		top: 25%;
		left: 10%;
	}

}

// 热卖推荐
.hotSale{
	// 盒子内容左右 20px
	padding-left: 24px;

	.hotSale_box{
		position: relative;
	}
	.hotSale_content{
		position: relative;
		margin-top: 23px;
		display: flex;

		.shangpinList{
			flex: 1;
			margin-bottom: 12px;
			background: #ffffff;
			width: 121px;
			// height: 226px;
			// box-shadow: 1px 1px 5px 0 rgb(231, 231, 231, 0.29);
			box-shadow: 2px 2px 5px 0 rgb(231, 231, 231, 0.29);

			.renqi_img{
				width: 121px;
				height: 121px;
				line-height: 121px;
			}

			.renqi_detail{
                width: calc(100% - 16px);
				// 文字过长换行
                white-space: nowrap;
                /* 防止文本换行 */
                overflow: hidden;
                /* 超出部分隐藏 */
                text-overflow: ellipsis;
                /* 显示省略号 */
				color: #191919;
				font-size: 22rpx;
				text-align: left;
				line-height: 22rpx;
				margin-top: 12px;
                margin-bottom: 15px;
				padding-left: 10px;
				padding-right: 6px;
				height: 22rpx;
			}
			.renqi_title{
				max-width: 104px;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: normal;

				line-height: 44rpx;
				font-size:28rpx;
				text-align: left;
				color: #191919;
				// margin-top:15px;
				padding-left: 10px;
				height: 84rpx;

			}
			.renqi_price{
				font-weight: bolder;
				line-height: 28rpx;
				font-size: 28rpx;
				text-align: left;
				color: #333333;
				margin-top: 18px;
				margin-left: 10px;
				margin-bottom: 12px;
			}
		}
	}
}

// 推荐  标题
.hotSale_title{
	font-weight: bolder;
	font-size: 40rpx;
	text-align: left;
	color: #111111;
	line-height: 40rpx;
	margin-left: 4px;
	margin-top: 30px;
}

// 热卖推荐轮播组件
.top-menu-view {
    display: flex;
    // position: fixed;
    white-space: nowrap;
    width:100%;

    .shangpinList {
		// width: 120px;
        display: inline-block;
        // white-space: nowrap;
        margin-right: 12px;
        position: relative;
    }

    // .shangpinList:last-child {
    //     // margin-right:16px;
    // }
}
.fixDiv {
    min-height: 226px;
    width: 10px;
    right: 0px;
    background: linear-gradient(270deg, #ffffff 25.52%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    z-index: 1;
}
.last-top-menu-view {
    width: calc(100% - 46px);
}
::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
}

// 为您推荐
.forYou{

	padding-left: 48rpx;
	padding-right: 48rpx;

	.forYou_content{
		display: flex;
		margin-top: 24px;
		justify-content: space-between;
		// justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap; /* 允许Flex项目换行 */
	}
	.forYouList{
		// flex: auto;
		// 缺少背景 边框 阴影
		// 盒子整体 距下一个10px、
		margin-bottom:40rpx;
		box-shadow: 1px 1px 5px 0 rgb(231, 231, 231, 0.29);
		background: #ffffff;
		// width: 47%;  //加了这个  下面图片的高就不写了   上面的img中要加 mode='widthFix'
        width: 320rpx;
		// margin-right: 9px;

		.forYou_img{
			// height: 163px;
			// line-height: 163px;
			// width: 163px;
			display: flex;
			flex-direction: column;
			justify-content: center;
            max-height: 320rpx;

			img{
				// width: 100%;
                width: 320rpx;
                height: 320rpx;
			}
		}
		.forYou_detail{  //副标题不存在换行   不用省略号
			// max-width: 163px;

			// display: -webkit-box;
			// -webkit-line-clamp: 2;
			// -webkit-box-orient: vertical;
			// overflow: hidden;
			// text-overflow: ellipsis;
			// white-space: normal;
			// font-weight: bolder;

			font-size: 22rpx;
			text-align: left;
			color: #191919;
			margin-top: 12px;
			min-height: 22rpx;
            margin-bottom: 15px;
            max-width:calc(100% - 16px);  //左右有8px
            // 用省略号表示
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
		}
        .forYou_title{
            // max-width: 138px;
            max-width:calc(100% - 16px);  //左右有8px
            // white-space: pre-wrap;
            // 用省略号表示
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 28rpx;
            // line-height:12px;
            text-align: left;
            color: #191919;
        }
        .forYou_price{
            font-weight: bolder;
            line-height: 28rpx;
            font-size: 28rpx;
            text-align: left;
            color: #333333;
            margin-top: 18px;
            margin-bottom: 12px;
        }

	}
}

// 底部广告图片位置
.guanggao{
	width: 100%;
	margin-top: 35px;
	height:118px;
	img{
		width: 100%;
	}
}

// logo
.logo_img {
	text-align: center;
	// width: 30%;
	// background-color: palegoldenrod;
	img{
		width: 30%;
	}
}
// 计时显示器
.timer-box {
    position: fixed;
    bottom: 200rpx;
    right: 30rpx;
    z-index: 999;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10rpx 20rpx;
    border-radius: 40rpx;
    font-size: 24rpx;

    .progress-bar {
        width: 200rpx;
        height: 8rpx;
        background: #666;
        margin-top: 10rpx;
        border-radius: 4rpx;

        .progress {
            height: 100%;
            background: #4CD964;
            border-radius: 4rpx;
            transition: width 1s linear;
        }
    }

    /* 内联完成状态样式 */
    .completed-inline {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 12px;
    }

    .return-button {
        margin: 0;
        padding: 0 12px;
        height: 28px;
        line-height: 28px;
        font-size: 12px;
        border-radius: 14px;
        background: #07c160;
        color: white;
    }
}
.timer-box-hasIcon {
    position: fixed;
    bottom: 300rpx;
    right: 48rpx;
    z-index: 999;
    // background: url("https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/pointsIcon.png") no-repeat;
    // background-size: 100%;
    //background-image: url('https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/pointsIcon.png');
    width: 126rpx;
    height: 144rpx;
    // padding: 0rpx 6rpx;


    .progress-bar-hasIcon {
        position: absolute;
        width: calc(100% - 12rpx);
        // width:126rpx ;
        height: 10rpx;
        background: rgb(255, 255, 255, 0.4);
        border-radius: 5rpx;
        bottom: 10rpx;
        left: 6rpx;


        .progress {
            height: 100%;
            background: #FFC460;
            border-radius: 5rpx;
            transition: width 1s linear;
        }

    }
}

// 已完成
.completed-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    
    .completed-box {
        background: #fff;
        padding: 40rpx;
        border-radius: 20rpx;
        text-align: center;
        
        .completed-icon {
            font-size: 60rpx;
            margin-bottom: 20rpx;
        }
        
        .completed-text {
            font-size: 32rpx;
            color: #333;
            margin-bottom: 40rpx;
        }
        
        .return-button {
            background: #4CD964;
            color: #fff;
            border-radius: 50rpx;
            padding: 0 60rpx;
            &::after { border: none; }
        }
    }
}
// margin
.pl8{
	padding-left: 8px;
}
.pr8{
	padding-right: 8px;
}
.l10{
	margin-left: 10px;
}
.r2 {
	margin-right: 2px;
}
.r5 {
	margin-right: 5px;
}

.r10 {
	margin-right: 10px;
}

.t1 {
	margin-left: 1px;
}

.t2 {
	margin-top: 2px;
}

.t5 {
	margin-top: 5px;
}

.t7 {
	margin-top: 7px;
}

.t9 {
	margin-top: 9px;
}

.t10 {
	margin-top: 10px;
}
.t17{
	margin-top: 17px;
}
.t20 {
	margin-top: 20px;
}

.t357{
	margin-top: 357px;
}
.b1 {
	margin-right: 1px;
}

.b9 {
	margin-bottom: 9px;
}
.b10 {
	margin-bottom: 10px;
}
.b11 {
	margin-bottom: 11px;
}

.b12 {
	margin-bottom: 12px;
}

.b13 {
	margin-bottom: 13px;
}

::v-deep .van-tabbar-item{
	font-size: 20rpx;
	color: #666666;
}
::v-deep .van-tabbar-item--active{
    font-weight:bolder;
	font-size: 20rpx;
	color: #666666;
}
</style>
